<template>
  <el-card>
    <div
      v-for="(item,index) in resourceData"
      :key="item.id">

      <el-checkbox
        :indeterminate="item.isIndeterminate"
        v-model="item.checked"
        @change="checkAllChildren(index,$event)"
        class="checkbox_1"
      >{{item.name}}</el-checkbox>
      <p class="checkbox_2" v-if="item.resourceList !==null">
        <el-checkbox
          v-for="menu in item.resourceList"
          v-model="menu.checked"
          :key="menu.id"
          :label="menu.name"
          class="checkbox_3"
          @change="checkChange(item, menu, $event)"
        >{{menu.name}}</el-checkbox>
      </p>

    </div>
    <div class="btn_">
      <el-button type="primary" @click="saveAllResource">保存</el-button>
      <el-button @click="checkClearAll(resourceData)">清空</el-button>
      <!-- <el-button @click="$router.push('/example')" type="primary">案例</el-button> -->
    </div>
  </el-card>
</template>

<script lang="ts">
import { allocateRoleResources, getRoleResources } from '@/services/resource'
import Vue from 'vue'
export default Vue.extend({
  name: 'AllocResource',
  props: {
    roleId: {
      type: [Number, String]
    }
  },
  data () {
    return {
      resourceData: [] // 总数据
    }
  },
  created () {
    this.loadResourceById()
  },
  // mounted () {
  //   this.resourceData = this.format(this.resourceData)
  //   console.log(this.resourceData)
  // },

  methods: {
    checkAllChildren (index:any, e:any) {
      // console.log('all', index, e);
      (this.resourceData[index] as any).checked = e
      if (e === false) (this.resourceData[index] as any).isIndeterminate = false
      if (e && (this.resourceData[index] as any).isIndeterminate) (this.resourceData[index] as any).isIndeterminate = false
      const childrenArray = (this.resourceData[index] as any).resourceList
      if (childrenArray) {
        for (var i = 0, len = childrenArray.length; i < len; i++) { (childrenArray[i] as any).checked = e }
      }
    },
    checkChange (father:any, child:any, e:any) {
      // console.log('checked', father, child, e)
      // const currentIdx = this.resourceData.findIndex((item:any) => item.id === outId)
      const childrenArray = father.resourceList

      let tickCount = 0 // 记录选中数量
      let unTickCount = 0 // 记录未选中数量
      const len = childrenArray.length
      for (let i = 0; i < len; i++) {
        if (child.id === childrenArray[i].id) {
          (childrenArray[i] as any).checked = e
          this.$set(childrenArray, i, childrenArray[i])
        }
        if ((childrenArray[i] as any).checked === true) tickCount++
        if ((childrenArray[i] as any).checked === false) unTickCount++
      }

      const currentIdx = this.resourceData.findIndex((d:any) => d.id === father.id)
      if (tickCount === len) { // 二级全勾选
        (this.resourceData[currentIdx] as any).checked = true;
        (this.resourceData[currentIdx] as any).isIndeterminate = false
      } else if (unTickCount === len) { // 二级全不勾选
        (this.resourceData[currentIdx] as any).checked = false;
        (this.resourceData[currentIdx] as any).isIndeterminate = false
      } else {
        // (father as any).checked = e;
        // (child as any).checked = e;
        (this.resourceData[currentIdx] as any).checked = e;
        (this.resourceData[currentIdx] as any).isIndeterminate = true // 添加一级不确定状态
      }
    },
    checkClearAll (data:any) {
      data.map((item:any) => {
        item.selected = false
        item.checked = false
        item.isIndeterminate = false
        if (item.resourceList) {
          this.checkClearAll(item.resourceList)
        }
      })
    },
    async saveAllResource () {
      const resourceIdList = this.handlerSoureId(this.resourceData)
      console.log(resourceIdList)

      // const { data } = await allocateRoleResources({
      //   roleId: this.roleId,
      //   resourceIdList
      // })
      // console.log(data)
    },

    async loadResourceById () {
      const { data } = await getRoleResources(this.roleId)
      this.resourceData = data.data
      this.handlerResourceSelect(this.resourceData)
      // console.log(this.resourceData)
      this.resourceData = this.format(this.resourceData)
    },

    handlerResourceSelect (data:any) {
      for (let i = 0; i < data.length; i++) {
        if (data[i].selected && data[i].resourceList) {
          const f = data[i].resourceList.filter((item:any) => item.selected === false)
          if (f.length !== 0) {
            data[i].selected = false
          }
        }
      }
    },

    format (items:any) {
      return items.map((item: any) => {
        const result = { ...item, checked: item.selected, isIndeterminate: this.indeterminateFnc(item) }
        if (item.resourceList) {
          result.resourceList = this.format(item.resourceList)
        }
        return result
      })
    },

    indeterminateFnc (item:any):boolean {
      if (item.sort && item.resourceList) {
        const havefs = item.resourceList.filter((it:any) => it.selected === true)
        if (havefs.length === 0) {
          return false
        }
        if (havefs.length !== item.resourceList.length) {
          return true
        }
      }
      return false
    },
    handlerSoureId (data:any):Array<any> {
      console.log('data:', data)

      // const arr = []
      // for (let i = 0; i < data.length; i++) {
      //   if (data[i].checked) {
      //     arr.push(data[i].id)
      //   }
      //   if (data[i].resourceList) {
      //     this.handlerSoureId(data[i].resourceList)
      //   }
      // }
      return []
    }
  }
})
</script>

<style lang="scss" scoped>
.btn_{
  text-align: center;
  margin-top: 2rem;
}
.checkbox_1{
  display: block;
  border: 1px solid #dcdfe6;
  height: 3.6rem;
  line-height: 3.6rem;
  padding-left: 1rem;
  background-color: #dcdfe6;
}
.checkbox_2{
  display: block;
  border: 1px solid #dcdfe6;
  padding: 2rem 0 1rem 1rem;
  box-sizing: border-box;
  margin-top: 0;
}
.checkbox_3{
  display: inline-block;
  line-height: 0;
  margin-bottom: 1rem;
}
</style>
